<template>
  <div class="calendar-container">
    <!-- 左侧栏 -->
    <div class="left-column">
      <!-- 按钮区域 -->
      <div class="button-area">
        <button
          @click="handleCreateSchedule"
          class="create-btn"
        >
          <i class="iconfont icon-add"></i>新建订单
        </button>
      </div>

      <!-- 迷你日历 -->
      <div class="mini-calendar">
        <div class="mini-calendar-header">
          <button
            @click="prevMonth"
            class="nav-btn"
          >
            <i class="iconfont icon-arrow-left"></i>
          </button>
          <span>{{ currentMonthYear }}</span>
          <button
            @click="nextMonth"
            class="nav-btn"
          >
            <i class="iconfont icon-arrow-right"></i>
          </button>
        </div>
        <div
          class="mini-calendar-grid"
          @mousedown="startSelection"
          @mousemove="updateSelection"
          @mouseup="endSelection"
          @mouseleave="cancelSelection"
        >
          <div
            class="mini-day-header"
            v-for="day in ['日', '一', '二', '三', '四', '五', '六']"
            :key="day"
          >
            {{ day }}
          </div>
          <div
            v-for="day in miniCalendarDays"
            :key="day.date"
            class="mini-day"
            :class="{
              'current-month': day.isCurrentMonth,
              today: day.isToday,
              selected: day.isSelected,
              'range-start': isRangeStart(day.date),
              'range-end': isRangeEnd(day.date),
              'in-range': isInRange(day.date),
            }"
            :data-date="day.date.toISOString()"
            @click="selectDay(day)"
            @mouseenter="handleDayHover(day)"
          >
            {{ day.day }}
            <span
              v-if="day.scheduleCount > 0"
              class="schedule-badge"
            >
              {{ day.scheduleCount }}
            </span>
          </div>
        </div>
      </div>

      <!-- 状态图例 -->
      <div class="status-legend">
        <div class="legend-title">状态说明</div>
        <div class="legend-items">
          <div class="legend-item">
            <span class="status-dot status-not-started"></span>
            <span>待处理</span>
          </div>
          <div class="legend-item">
            <span class="status-dot status-in-progress"></span>
            <span>进行中</span>
          </div>
          <div class="legend-item">
            <span class="status-dot status-completed"></span>
            <span>已完成</span>
          </div>
        </div>
      </div>

      <!-- 日期日程列表 -->
      <div class="date-schedule-list">
        <h3>{{ dateScheduleTitle }}</h3>
        <div class="schedule-items">
          <div
            v-for="schedule in sortedDateSchedules"
            :key="schedule.id"
            class="schedule-item"
            @click="showOrderDetail(schedule)"
            :style="`border-left: 4px solid ${getScheduleColor(schedule)}`"
          >
            <div
              class="bg"
              :style="`background: ${getScheduleColor(schedule)}`"
            ></div>
            <div class="schedule-title">
              <span
                class="category-tag"
                :style="`background-color: ${getCategoryColor(getCategoryName(schedule.title))}`"
              >
                {{ getCategoryName(schedule.title) }}
              </span>
              <span class="customer-name">{{ getCustomerName(schedule.title) }}</span>

            </div>
            <div
              class="schedule-status"
              :class="getScheduleStatusClass(schedule)"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧栏 -->
    <div class="right-column">
      <!-- 顶栏 -->
      <div class="calendar-header">
        <div class="header-date">{{ currentMonthYear }}</div>
        <div class="header-nav">
          <button
            @click="prevMonth"
            class="nav-btn"
          >
            <i class="iconfont icon-arrow-left"></i>
          </button>
          <button
            @click="nextMonth"
            class="nav-btn"
          >
            <i class="iconfont icon-arrow-right"></i>
          </button>
        </div>
      </div>

      <!-- 大日历 -->
      <div class="full-calendar">
        <div class="weekdays">
          <div
            v-for="day in ['周日', '周一', '周二', '周三', '周四', '周五', '周六']"
            :key="day"
            class="weekday"
          >
            {{ day }}
          </div>
        </div>
        <div class="calendar-grid">
          <div
            v-for="day in calendarDays"
            :key="day.date"
            class="calendar-day"
            :class="{
              'current-month': day.isCurrentMonth,
              today: day.isToday,
              selected: day.isSelected,
              weekend: day.isWeekend,
            }"
          >
            <div class="day-header">
              <div
                class="day-number"
                :class="{ today: day.isToday }"
              >
                <b>{{ day.day }}</b>
                <span class="lunar-day">{{ day.lunarDay }}</span>
              </div>
            </div>
            <div class="day-schedules">
              <div
                v-for="schedule in day.schedules"
                :key="schedule.id"
                class="schedule-item"
                :style="`border-left: 4px solid ${getScheduleColor(schedule)}`"
                @click="showOrderDetail(schedule)"
              >
                <div
                  class="bg"
                  :style="`background:${getScheduleColor(schedule)}`"
                ></div>
                <div class="schedule-title">
                  <span
                    class="category-tag"
                    :style="`background-color: ${getCategoryColor(getCategoryName(schedule.title))}`"
                  >
                    {{ getCategoryName(schedule.title) }}
                  </span>
                  <span class="customer-name">{{ getCustomerName(schedule.title) }}</span>
                </div>
                <div
                  class="schedule-status"
                  :class="getScheduleStatusClass(schedule)"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单详情弹窗 -->
    <OrderDetailDialog
      v-if="showOrderDialog"
      :order="selectedOrder"
      :showDialog="showOrderDialog"
      @close="closeOrderDialog"
      @status-updated="handleStatusUpdated"
    />
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { get } from "@/request";
import { vToast } from "@/plugins/vToast";
import { getLunarDate } from "@/utils/lunarCalendar";
import {
  format,
  addMonths,
  startOfMonth,
  endOfMonth,
  eachDayOfInterval,
  isSameMonth,
  isToday,
  isSameDay,
  parseISO,
  getDay,
  addDays,
  isAfter,
  isBefore,
  differenceInDays,
} from "date-fns";
import OrderDetailDialog from "@/components/OrderDetailDialog.vue";

export default {
  components: {
    OrderDetailDialog,
  },
  setup() {
    const router = useRouter();

    const currentDate = ref(new Date());
    const selectedDate = ref(new Date());
    const schedules = ref([]);
    const orders = ref([]);
    const loading = ref(false);

    // 日期区间选择相关状态
    const selectionStart = ref(null);
    const selectionEnd = ref(null);
    const isSelecting = ref(false);

    // 订单详情弹窗
    const showOrderDialog = ref(false);
    const selectedOrder = ref(null);

    // 计算属性
    const currentMonthYear = computed(() => {
      return format(currentDate.value, "yyyy年MM月");
    });

    const selectedRange = computed(() => {
      if (!selectionStart.value || !selectionEnd.value) return [];

      const start =
        selectionStart.value < selectionEnd.value
          ? selectionStart.value
          : selectionEnd.value;
      const end =
        selectionStart.value < selectionEnd.value
          ? selectionEnd.value
          : selectionStart.value;

      const days = [];
      let current = new Date(start);

      while (current <= end) {
        days.push(new Date(current));
        current = addDays(current, 1);
      }

      return days;
    });

    const miniCalendarDays = computed(() => {
      const start = startOfMonth(currentDate.value);
      const end = endOfMonth(currentDate.value);

      const firstDayOfWeek = getDay(start);
      const prevMonthDays = firstDayOfWeek;
      const totalDays = 6 * 7;
      const daysInMonth = eachDayOfInterval({ start, end }).length;
      const nextMonthDays = totalDays - daysInMonth - prevMonthDays;

      const calendarStart = addDays(start, -prevMonthDays);
      const calendarEnd = addDays(end, nextMonthDays);

      const days = eachDayOfInterval({
        start: calendarStart,
        end: calendarEnd,
      });

      return days.map((day) => {
        const lunar = getLunarDate(day);

        // 计算当天的日程数量
        const daySchedules = schedules.value.filter((schedule) =>
          isSameDay(parseISO(schedule.date), day)
        );
        const scheduleCount = daySchedules.length;

        return {
          date: day,
          day: format(day, "d"),
          lunarDay: lunar.day,
          isCurrentMonth: isSameMonth(day, currentDate.value),
          isToday: isToday(day),
          isSelected: isSameDay(day, selectedDate.value),
          scheduleCount,
        };
      });
    });

    const calendarDays = computed(() => {
      const start = startOfMonth(currentDate.value);
      const end = endOfMonth(currentDate.value);

      const firstDayOfWeek = getDay(start);
      const prevMonthDays = firstDayOfWeek;
      const lastDayOfWeek = getDay(end);
      const nextMonthDays = 6 - lastDayOfWeek;

      const calendarStart = new Date(start);
      calendarStart.setDate(start.getDate() - prevMonthDays);

      const calendarEnd = new Date(end);
      calendarEnd.setDate(end.getDate() + nextMonthDays);

      const days = eachDayOfInterval({
        start: calendarStart,
        end: calendarEnd,
      });

      return days.map((day) => {
        const lunar = getLunarDate(day);
        const daySchedules = schedules.value.filter((schedule) =>
          isSameDay(parseISO(schedule.date), day)
        );

        return {
          date: day,
          day: format(day, "d"),
          lunarDay: lunar.day,
          isCurrentMonth: isSameMonth(day, currentDate.value),
          isToday: isToday(day),
          isSelected: isSameDay(day, selectedDate.value),
          isWeekend: [0, 6].includes(getDay(day)),
          schedules: daySchedules,
        };
      });
    });

    // 日期日程标题
    const dateScheduleTitle = computed(() => {
      return `${format(selectedDate.value, "yyyy年MM月dd日")}日程`;
    });

    // 日期日程列表
    const dateSchedules = computed(() => {
      return schedules.value.filter((schedule) =>
        isSameDay(parseISO(schedule.date), selectedDate.value)
      );
    });

    // 按状态排序的日期日程列表
    const sortedDateSchedules = computed(() => {
      return [...dateSchedules.value].sort((a, b) => {
        const orderA = orders.value.find((o) => o.id === a.orderId);
        const orderB = orders.value.find((o) => o.id === b.orderId);

        // 待处理的排在最上面
        if (orderA?.status === "待处理" && orderB?.status !== "待处理")
          return -1;
        if (orderA?.status !== "待处理" && orderB?.status === "待处理")
          return 1;

        // 然后是进行中的
        if (orderA?.status === "进行中" && orderB?.status !== "进行中")
          return -1;
        if (orderA?.status !== "进行中" && orderB?.status === "进行中")
          return 1;

        return 0;
      });
    });

    // 方法
    const prevMonth = () => {
      currentDate.value = addMonths(currentDate.value, -1);
    };

    const nextMonth = () => {
      currentDate.value = addMonths(currentDate.value, 1);
    };

    const selectDay = (day) => {
      selectedDate.value = day.date;
    };

    const formatTime = (time) => {
      return time.slice(0, 5);
    };

    const handleCreateSchedule = () => {
      router.push({
        name: "orderCreate",
        query: {
          date: format(currentDate.value, "yyyy-MM-dd"),
        },
      });
    };

    // 显示订单详情
    const showOrderDetail = (schedule) => {
      if (schedule.type === "order") {
        // 查找对应的订单
        const order = orders.value.find((o) => o.id === schedule.orderId);
        if (order) {
          selectedOrder.value = order;
          showOrderDialog.value = true;
        }
      }
    };

    // 关闭订单详情弹窗
    const closeOrderDialog = () => {
      showOrderDialog.value = false;
      selectedOrder.value = null;
    };

    // 处理状态更新
    const handleStatusUpdated = (updatedOrder) => {
      // 更新订单列表中的状态
      const index = orders.value.findIndex((o) => o.id === updatedOrder.id);
      if (index !== -1) {
        orders.value[index].status = updatedOrder.status;
      }

      // 重新加载数据以更新视图
      loadOrders();
    };

    // 日期区间选择方法
    const startSelection = (event) => {
      if (event.target.classList.contains("mini-day")) {
        const dateStr = event.target.getAttribute("data-date");
        if (dateStr) {
          isSelecting.value = true;
          selectionStart.value = new Date(dateStr);
          selectionEnd.value = new Date(dateStr);
        }
      }
    };

    const updateSelection = (event) => {
      if (isSelecting.value && event.target.classList.contains("mini-day")) {
        const dateStr = event.target.getAttribute("data-date");
        if (dateStr) {
          selectionEnd.value = new Date(dateStr);
        }
      }
    };

    const endSelection = () => {
      isSelecting.value = false;
    };

    const cancelSelection = () => {
      if (isSelecting.value) {
        isSelecting.value = false;
        selectionStart.value = null;
        selectionEnd.value = null;
      }
    };

    const handleDayHover = (day) => {
      if (isSelecting.value) {
        selectionEnd.value = day.date;
      }
    };

    const isRangeStart = (date) => {
      if (!selectionStart.value || !selectionEnd.value) return false;
      const sortedStart =
        selectionStart.value < selectionEnd.value
          ? selectionStart.value
          : selectionEnd.value;
      return isSameDay(date, sortedStart);
    };

    const isRangeEnd = (date) => {
      if (!selectionStart.value || !selectionEnd.value) return false;
      const sortedEnd =
        selectionStart.value < selectionEnd.value
          ? selectionEnd.value
          : selectionStart.value;
      return isSameDay(date, sortedEnd);
    };

    const isInRange = (date) => {
      if (!selectionStart.value || !selectionEnd.value) return false;

      const start =
        selectionStart.value < selectionEnd.value
          ? selectionStart.value
          : selectionEnd.value;
      const end =
        selectionStart.value < selectionEnd.value
          ? selectionEnd.value
          : selectionStart.value;

      return (
        (isAfter(date, start) || isSameDay(date, start)) &&
        (isBefore(date, end) || isSameDay(date, end))
      );
    };

    // 获取日程颜色
    const getScheduleColor = (schedule) => {
      if (!schedule.orderId) return "#4ECDC4";

      // 为每个订单生成唯一颜色
      const colors = [
        "#FF6B6B",
        "#FFBE0B",
        "#4ECDC4",
        "#A162E8",
        "#1A936F",
        "#FF9F1C",
        "#E71D36",
        "#2EC4B6",
        "#FF006E",
        "#8338EC",
        "#3A86FF",
        "#FB5607",
      ];

      // 使用订单ID生成颜色索引
      const idHash = schedule.orderId.split("").reduce((acc, char) => {
        return acc + char.charCodeAt(0);
      }, 0);

      return colors[idHash % colors.length];
    };

    // 获取分类名称
    const getCategoryName = (title) => {
      // 从"分类-客户"格式中提取分类名称
      const parts = title.split(" - ");
      return parts.length > 0 ? parts[0] : "";
    };

    // 获取客户名称
    const getCustomerName = (title) => {
      // 从"分类-客户"格式中提取客户名称
      const parts = title.split(" - ");
      return parts.length > 1 ? parts[1] : title;
    };

    // 获取分类颜色
    const getCategoryColor = (categoryName) => {
      // 为每种分类生成固定颜色
      const colors = [
        "#FF6B6B",
        "#FFBE0B",
        "#4ECDC4",
        "#A162E8",
        "#1A936F",
        "#FF9F1C",
        "#E71D36",
        "#2EC4B6",
        "#FF006E",
        "#8338EC",
        "#3A86FF",
        "#FB5607",
      ];

      // 使用分类名称生成颜色索引
      const hash = categoryName.split("").reduce((acc, char) => {
        return acc + char.charCodeAt(0);
      }, 0);

      return colors[hash % colors.length];
    };

    // 获取日程状态类名
    const getScheduleStatusClass = (schedule) => {
      // 查找对应的订单
      const order = orders.value.find((o) => o.id === schedule.orderId);
      if (!order) return "status-not-started";

      switch (order.status) {
        case "已完成":
          return "status-completed";
        case "进行中":
          return "status-in-progress";
        case "待处理":
          return "status-not-started";
        default:
          return "status-not-started";
      }
    };

    // 对每日日程进行排序
    const sortedDaySchedules = (schedules) => {
      return [...schedules].sort((a, b) => {
        const orderA = orders.value.find((o) => o.id === a.orderId);
        const orderB = orders.value.find((o) => o.id === b.orderId);

        // 待处理的排在最上面
        if (orderA?.status === "待处理" && orderB?.status !== "待处理")
          return -1;
        if (orderA?.status !== "待处理" && orderB?.status === "待处理")
          return 1;

        // 然后是进行中的
        if (orderA?.status === "进行中" && orderB?.status !== "进行中")
          return -1;
        if (orderA?.status !== "进行中" && orderB?.status === "进行中")
          return 1;

        return 0;
      });
    };

    // 加载订单数据并转换为日程
    const loadOrders = async () => {
      try {
        loading.value = true;
        const res = await get("/order/list");

        if (res && res.code === 200) {
          orders.value = res.data?.list || res.data?.items || [];

          // 将订单转换为日程
          const orderSchedules = [];

          orders.value.forEach((order) => {
            const startDate = parseISO(order.start_date);
            const endDate = parseISO(order.end_date);
            const days = differenceInDays(endDate, startDate) + 1;

            // 为订单的每一天创建一个日程
            for (let i = 0; i < days; i++) {
              const currentDate = addDays(startDate, i);

              orderSchedules.push({
                id: `order_${order.id}_${i}`,
                title: `${order.type} - ${order.customer_name}`,
                date: format(currentDate, "yyyy-MM-dd"),
                startTime: "09:00",
                endTime: "18:00",
                description: `订单号: ${order.order_number}`,
                type: "order",
                orderId: order.id,
                status: order.status, // 确保状态被传递
              });
            }
          });

          schedules.value = orderSchedules;
        } else {
          vToast({ message: res?.msg || "加载订单失败", position: "top" });
        }
      } catch (error) {
        console.error("获取订单列表失败:", error);
        vToast({ message: "获取订单列表失败", position: "top" });
      } finally {
        loading.value = false;
      }
    };

    // 初始化数据
    onMounted(() => {
      loadOrders();
    });

    return {
      currentDate,
      selectedDate,
      currentMonthYear,
      miniCalendarDays,
      calendarDays,
      dateScheduleTitle,
      dateSchedules,
      sortedDateSchedules,
      showOrderDialog,
      selectedOrder,
      prevMonth,
      nextMonth,
      selectDay,
      formatTime,
      handleCreateSchedule,
      showOrderDetail,
      closeOrderDialog,
      handleStatusUpdated,
      startSelection,
      updateSelection,
      endSelection,
      cancelSelection,
      handleDayHover,
      isRangeStart,
      isRangeEnd,
      isInRange,
      getScheduleColor,
      getCategoryName,
      getCustomerName,
      getCategoryColor,
      getScheduleStatusClass,
      sortedDaySchedules,
    };
  },
};
</script>

<style scoped lang="less">
.calendar-container {
  display: flex;
  height: 100vh;
  background-color: #f8f9fa;
}

.left-column {
  width: 320px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
}

.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
}

.button-area {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.create-btn {
  background-color: var(--bs-theme-color);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.create-btn:hover {
  background-color: var(--bs-theme-color);
}

.mini-calendar {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.mini-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mini-calendar-header span {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  position: relative;
  user-select: none;
}

.mini-day-header {
  text-align: center;
  font-size: 12px;
  color: #666;
  padding: 8px 0;
}

.mini-day {
  text-align: center;
  padding: 8px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  position: relative;
}

.mini-day.current-month {
  background-color: #fff;
  color: #333;
}

.mini-day:not(.current-month) {
  color: #aaa;
}

.mini-day.today {
  background-color: #e6f7ff;
  color: var(--bs-theme-color);
  font-weight: bold;
}

.mini-day.selected {
  background-color: var(--bs-theme-color) !important;
  color: white !important;
  border-radius: 6px !important;
}

.mini-day.range-start {
  background-color: var(--bs-theme-color);
  color: white;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.mini-day.range-end {
  background-color: var(--bs-theme-color);
  color: white;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.mini-day.in-range {
  background-color: rgba(74, 144, 226, 0.2);
}

/* 日程数量标记样式 */
.schedule-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--bs-bg-color);
  color: var(--bs-theme-color);
  border: var(--bs-theme-color) 1px solid;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}

/* 对于非当前月的日期，标记颜色变淡 */
.mini-day:not(.current-month) .schedule-badge {
  opacity: 0.3;
}

/* 对于选中的日期，标记颜色变亮 */
.mini-day.selected .schedule-badge {
  background-color: white;
  color: var(--bs-theme-color);
}

/* 状态图例样式 */
.status-legend {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f9f9f9;
}

.legend-title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}

.legend-items {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.status-not-started {
  background-color: #faad14; /* 橙色 - 待处理 */
}

.status-in-progress {
  background-color: #52c41a; /* 绿色 - 进行中 */
}

.status-completed {
  background-color: #d9d9d9; /* 灰色 - 已完成 */
}

.date-schedule-list {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.date-schedule-list h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
}

.schedule-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-item {
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  position: relative;
}
.schedule-item .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0.1;
}
.schedule-item:hover {
  background-color: #e8e8e8;
  transform: translateY(-1px);
}

.schedule-title {
  display: flex;
  align-items: center;
  width: 100%;
}

.customer-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.category-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.schedule-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 8px;
  flex-shrink: 0;
}

.status-not-started {
  background-color: #faad14; /* 橙色 - 待处理 */
}

.status-in-progress {
  background-color: #52c41a; /* 绿色 - 进行中 */
}

.status-completed {
  background-color: #d9d9d9; /* 灰色 - 已完成 */
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  height: 72px;
}

.header-date {
  font-size: 26px;
  font-weight: 300;
  color: #333;
}

.header-nav {
  display: flex;
  gap: 8px;
}

.nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
  padding: 0;
}

.nav-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.full-calendar {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 72px); /* 72px是顶栏高度 */
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0; /* 防止被压缩 */
}

.weekday {
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-right: 1px solid var(--bs-border-color);
  font-weight: bold;
  &:first-child {
    color: var(--bs-theme-color);
  }
  &:last-child {
    color: var(--bs-theme-color);
  }
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr)); /* 关键修改 */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.calendar-day {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.calendar-day:not(.current-month) {
  background-color: var(--bs-bg-color);
  color: #aaa;
}

.calendar-day.weekend {
  .day-number {
    color: var(--bs-theme-color);
  }
}

.calendar-day.today {
  background-color: #e4f6ff;
  border: var(--bs-theme-color) 1px solid;
}

.calendar-day.today .day-number {
  color: var(--bs-theme-color);
}

.calendar-day.selected {
  background-color: rgba(74, 144, 226, 0.05);
}

.day-header {
  margin-bottom: 6px;
  flex-shrink: 0; /* 防止被压缩 */
}

.day-number {
  position: relative;
  display: flex;
  align-items: center;
}
.day-number b {
  font-size: 16px;
  font-weight: 600;
  padding: 0 5px;
}

.lunar-day {
  font-size: 10px;
  color: #999;
  margin-left: 4px;
}

.day-schedules {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 130px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

.schedule-item {
  font-size: 12px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  border-left: 4px solid var(--bs-theme-color);
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 100%; /* 限制最大宽度 */
  position: relative;
}

.schedule-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.schedule-item .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .calendar-day {
    min-height: 100px;
  }
  .full-calendar {
    height: calc(100vh - 100px);
  }
}

@media (max-width: 992px) {
  .calendar-day {
    min-height: 80px;
  }

  .day-number {
    font-size: 14px;
  }

  .schedule-item {
    padding: 4px 6px;
    font-size: 11px;
  }

  /* 调整迷你日历的日程标记大小 */
  .schedule-badge {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
}
</style>